import QtQuick 2.0

import "./Chart"

Rectangle
{
    visible: true
    width: parent.width
    height: parent.height

    property double m_itemWidthConffict: 0.3
    property int m_barValue : 50;

    Flow
    {
        anchors.fill: parent
        spacing: 5

        //bar
        Chart
        {
            id: barChart
            width: parent.width * m_itemWidthConffict
            height: width - 50
            onPaint:
            {
                bar( {
                        labels : ["一月","February","March","April","May","June","July"],
                        datasets : [
                            {
                                fillColor : "rgba(220,220,220,0.5)",
                                strokeColor : "rgba(220,220,220,1)",
                                data : [m_barValue,59,90,81,56,55,40]
                            },
                            {
                                fillColor : "rgba(151,187,205,0.5)",
                                strokeColor : "rgba(151,187,205,1)",
                                data : [28,48,40,19,96,27,100]
                            }
                        ]
                    });
            }

            Timer
            {
                id: tim
                interval: 100
                repeat: true
                running: false
                onTriggered:
                {
                    if (m_barValue > 140)
                    {
                        m_barValue = 20;
                    }

                    m_barValue+=10;
                    barChart.requestPaint()
                }
            }
        }

        //line
        Chart
        {
            width: parent.width * m_itemWidthConffict
            height: width - 50
            onPaint:
            {
                line({
                         labels : ["January","February","March","April","May","June","July"],
                         datasets : [
                             {
                                 fillColor : "rgba(220,220,220,0.5)",
                                 strokeColor : "rgba(220,220,220,1)",
                                 pointColor : "rgba(220,220,220,1)",
                                 pointStrokeColor : "#fff",
                                 data : [65,59,90,81,56,55,40]
                             },
                             {
                                 fillColor : "rgba(151,187,205,0.5)",
                                 strokeColor : "rgba(151,187,205,1)",
                                 pointColor : "rgba(151,187,205,1)",
                                 pointStrokeColor : "#fff",
                                 data : [28,48,40,19,96,27,100]
                             }
                         ]
                     });
            }
        }

        //radar
        Chart
        {
            width: parent.width * m_itemWidthConffict
            height: width - 50

            onPaint:
            {
                radar( {
                          labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
                          datasets : [
                              {
                                  fillColor : "rgba(220,220,220,0.5)",
                                  strokeColor : "rgba(220,220,220,1)",
                                  pointColor : "rgba(220,220,220,1)",
                                  pointStrokeColor : "#fff",
                                  data : [65,59,90,81,56,55,40]
                              },
                              {
                                  fillColor : "rgba(151,187,205,0.5)",
                                  strokeColor : "rgba(151,187,205,1)",
                                  pointColor : "rgba(151,187,205,1)",
                                  pointStrokeColor : "#fff",
                                  data : [28,48,40,19,96,27,100]
                              }
                          ]
                      });
            }
        }

        //polarArea
        Chart
        {
            width: parent.width * m_itemWidthConffict
            height: width - 50

            onPaint:
            {
                polarArea([
                              {
                                  value : 30,
                                  color: "#D97041"
                              },
                              {
                                  value : 90,
                                  color: "#C7604C"
                              },
                              {
                                  value : 24,
                                  color: "#21323D"
                              },
                              {
                                  value : 58,
                                  color: "#9D9B7F"
                              },
                              {
                                  value : 82,
                                  color: "#7D4F6D"
                              },
                              {
                                  value : 8,
                                  color: "#584A5E"
                              }
                          ]);
            }
        }

        //pie
        Chart
        {
            width: parent.width * m_itemWidthConffict
            height: width - 50

            onPaint:
            {
                pie([
                        {
                            value: 30,
                            color:"#F38630"
                        },
                        {
                            value : 50,
                            color : "#E0E4CC"
                        },
                        {
                            value : 100,
                            color : "#69D2E7"
                        }
                    ]);
            }
        }

        //doughnut
        Chart
        {
            width: parent.width * m_itemWidthConffict
            height: width - 50

            onPaint:
            {
                doughnut([
                             {
                                 value: 30,
                                 color:"#F7464A"
                             },
                             {
                                 value : 50,
                                 color : "#E2EAE9"
                             },
                             {
                                 value : 100,
                                 color : "#D4CCC5"
                             },
                             {
                                 value : 40,
                                 color : "#949FB1"
                             },
                             {
                                 value : 120,
                                 color : "#4D5360"
                             }

                         ]);
            }
        }
    }
}
